<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
   <title>java 知乎爬虫</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="http://cdnjs.w3cbus.com/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
   
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
   <script src="http://cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js"></script>
   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

  <script >
  function get_data()
  {
      $.ajax({
          url: 'getAmount/base',
          success: function(data) {
              console.log(data);
              $("#base").html(data);
          }
      });

      $.ajax({
          url: 'getAmount/detail',
          success: function(data) {
            console.log(data);
              $("#detail").html(data);
          }
        });
  }
    setInterval("get_data()",10000);//每10s执行一次刷新

    $(function () {
      get_data();
    	
      $('#btn-search').on('click', function(){
        var value = $('.form-control').val();
        if(value==""){
          layer.msg("输入不能为空");
        }else{
          $.ajax({
              url: 'searchByName?name='+value,
              success: function(data) {
                  layer.msg(JSON.stringify(data));
                  console.log(JSON.stringify(data));
              }
          });
        }
      });

      $.scrollUp({
        scrollImg: true ,// Set true to use image
        scrollName: 'scrollUp', // Element ID
        scrollDistance: 300, // Distance from top/bottom before showing element (px)
        scrollFrom: 'top', // 'top' or 'bottom'
        scrollSpeed: 300, // Speed back to top (ms)
        easingType: 'linear', // Scroll to top easing (see http://easings.net/)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element, can contain HTML
        scrollTitle: false, // Set a custom <a> title if required. Defaults to scrollText
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647 // Z-Index for the overlay
      });
    });


  </script>
  <!--[if lt IE 9]>
    <link rel="stylesheet" href="http://cdnjs.w3cbus.com/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
  <![endif]-->

  <style type="text/css">
  /* Image style */
  #scrollUp {
    bottom: 20px;
    right: 20px;
    height: 38px;  /* Height of image */
    width: 38px; /* Width of image */
    background: url(http://2.bp.blogspot.com/--EgHE5Oau7o/UpsYYWRE8YI/AAAAAAAAQE8/l6arzEsDIeQ/s1600/top.png) no-repeat;
  }
  </style>
</head>
 <body>
<!--<a>  <img style="position: fixed; z-index:999; top: 0; right: 0; border: 0;"    src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> -->
 <nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">基本信息数</a>
       <p class="navbar-text navbar-right" id="base"></p>
   </div>

   <div class="navbar-header">
      <a class="navbar-brand" href="#">详细信息数</a>
      <p class="navbar-text navbar-right" id="detail"></p>
   </div>

   <div class="collapse navbar-collapse"  id="example-navbar-collapse">
     <form class="navbar-form navbar-right" role="search" >
        <div class="form-group">
           <input type="text"   value="爬虫已死" class="form-control" placeholder="Search">
        </div>
        <!-- <button   type="button" id="btn-search"  class="btn btn-default">提交</button>    尊重知友隐私-->
     </form>
  </div>

</nav>


<div id="gender" style="height:400px; width:600px; padding: 10px;margin-right: auto; margin-left: auto; "></div>
<hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 size=3>
<div id="location" style="height:400px; width:600px; padding: 10px;margin-right: auto; margin-left: auto; "></div>
<hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 size=3>
<div id="business" style="height:400px; width:600px; padding: 10px;margin-right: auto; margin-left: auto; "></div>
<hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 size=3>
<div id="education" style="height:400px; width:600px; padding: 10px;margin-right: auto; margin-left: auto; "></div>
<hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 size=3>
<div id="employment" style="height:400px; width:600px; padding: 10px;margin-right: auto; margin-left: auto; "></div>
</body>
<script type="text/javascript">
       // 路径配置
       require.config({
           paths: {
               echarts: 'http://echarts.baidu.com/build/dist'
           }
       });
       
 
       // echart使用
       require(
           [
               'echarts',
               'echarts/chart/pie', // 使用柱状图就加载bar模块
               'echarts/chart/funnel', //漏斗 
               'echarts/chart/bar', //柱状图
               'echarts/chart/line',  //折线
               'echarts/chart/treemap',   //矩形
           ],
           DrawEChart 
       );
       
       function DrawEChart(ec) {
         var genderChart = ec.init(document.getElementById('gender'));   
         var locationChart = ec.init(document.getElementById('location'));  
         var businessChart = ec.init(document.getElementById('business'));  
         var educationChart = ec.init(document.getElementById('education'));  
         var employmentChart = ec.init(document.getElementById('employment'));  
         
         // 载入动画---------------------
           genderChart.showLoading({
               text: '正在努力的读取数据中...',     
           });
           locationChart.showLoading({
               text: '正在努力的读取数据中...',     
           });
           businessChart.showLoading({
               text: '正在努力的读取数据中...',     
           });
           educationChart.showLoading({
               text: '正在努力的读取数据中...',     
           });
           employmentChart.showLoading({
               text: '正在努力的读取数据中...',     
           });
           
           
         //---------------------------------------------
           $.post("getGenderInfo",function(data){
             var legendData=new Array();
               var amount=0;
             var genderInfo =  JSON.stringify(data);
          $.each(JSON.parse(genderInfo), function(i, item) {
            amount = item.value+amount
            legendData.push(item.name)
          })
          
          var genderOption = {
               title : {
                   text: '用户性别统计',
                   subtext: '基数'+amount,
                   x:'center'
               },
               tooltip : {
                   trigger: 'item',
                   formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               legend: {
                   orient : 'vertical',
                   x : 'left',
                 data:legendData
               },
               toolbox: {
                   show : true,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       magicType : {
                           show: true, 
                           type: ['pie', 'funnel'],
                           option: {
                               funnel: {
                                   x: '25%',
                                   width: '50%',
                                   funnelAlign: 'left',
                                   max: amount
                               }
                           }
                       },
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable : true,
               series : [
                   {
                       name:'访问来源',
                       type:'pie',
                       radius : '55%',
                       center: ['50%', '60%'],
                     data: legendData
                   }
               ]
           };
          genderChart.hideLoading(); 
          genderChart.setOption(genderOption);
          window.onresize = genderChart.resize;
       });
         
         //---------------------------------------------
       $.post("getLocationInfo",function(locationData){
         console.log(JSON.stringify(locationData))
         var locationOption = {
                   title : {
                       text: '地域分布图',
                       subtext: '显示前10',
                       x:'center'
                   },
                   tooltip : {
                       trigger: 'axis'
                   },
                   toolbox: {
                       show : true,
                       feature : {
                           mark : {show: true},
                           dataView : {show: true, readOnly: false},
                           magicType : {show: true, type: ['line', 'bar']},
                           restore : {show: true},
                           saveAsImage : {show: true}
                       }
                   },
                   calculable : true,
                   grid: {
                       borderWidth: 0,
                       y: 80,
                       y2: 60
                   },
                   xAxis : [
                       {
                           type : 'category',
                           data : locationData.sXAxis
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
                   series : [
                       {
                           name:'人数',
                           type:'bar',
                           itemStyle: {
                               normal: {
                                   color: function(params) {
                                       var colorList = [
                                         '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                          '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                          '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                       ];
                                       return colorList[params.dataIndex]
                                   },
                                   label: {
                                       show: true,
                                       position: 'top',
                                       formatter: '{b}\n{c}'
                                   },
                                   barBorderRadius:5
                               }
                           },
                           data:locationData.yAxis,
                           markLine : {
                               data : [
                                   {type : 'average', name: '平均值'}
                               ]
                           }
                       }
                   ]
               };
                 locationChart.hideLoading(); 
                 locationChart.setOption(locationOption);
                 window.onresize = locationChart.resize;
       });
           
       //---------------------------------------------
       $.post("getBusinessStatic",function(businessData){
         console.log(JSON.stringify(businessData))
         var businessOption = {
               title : {
                   text: '人群行业分布图',
                   subtext: '显示前10',
                   x:'center'
               },
               tooltip : {
                   trigger: 'axis'
               },
               toolbox: {
                   show : true,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       magicType : {show: true, type: ['line', 'bar']},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable : true,
               grid: {
                   borderWidth: 0,
                   y: 80,
                   y2: 60
               },
               xAxis : [
                   {
                       type : 'category',
                       data : businessData.sXAxis
                   }
               ],
               yAxis : [
                   {
                       type : 'value'
                   }
               ],
               series : [
                   {
                       name:'人数',
                       type:'bar',
                       itemStyle: {
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                   ];
                                   return colorList[params.dataIndex]
                               },
                               label: {
                                   show: true,
                                   position: 'top',
                                   formatter: '{b}\n{c}'
                               },
                               barBorderRadius:5
                           }
                       },
                       data:businessData.yAxis,
                       markLine : {
                           data : [
                               {type : 'average', name: '平均值'}
                           ]
                       }
                   }
               ]
           };
              businessChart.hideLoading(); 
              businessChart.setOption(businessOption);
              window.onresize = businessChart.resize;
       });
       //---------------------------------------------
       $.post("getEducationStatic",function(educationData){
         console.log(JSON.stringify(educationData))
          var educationOption = {
               title : {
                   text: '人群受教育程度分布图',
                   subtext: '显示前10',
                   x:'center'
               },
               tooltip : {
                   trigger: 'axis'
               },
               toolbox: {
                   show : true,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       magicType : {show: true, type: ['line', 'bar']},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable : true,
               grid: {
                   borderWidth: 0,
                   y: 80,
                   y2: 60
               },
               xAxis : [
                   {
                       type : 'category',
                       data : educationData.sXAxis
                   }
               ],
               yAxis : [
                   {
                       type : 'value'
                   }
               ],
               series : [
                   {
                       name:'人数',
                       type:'bar',
                       itemStyle: {
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                   ];
                                   return colorList[params.dataIndex]
                               },
                               label: {
                                   show: true,
                                   position: 'top',
                                   formatter: '{b}\n{c}'
                               },
                               barBorderRadius:5
                           }
                       },
                       data:educationData.yAxis,
                       markLine : {
                           data : [
                               {type : 'average', name: '平均值'}
                           ]
                       }
                   }
               ]
           };
             educationChart.hideLoading(); 
             educationChart.setOption(educationOption);
             window.onresize = educationChart.resize;
       });
       //---------------------------------------------
       $.post("getEmploymentStatic",function(employmentData){
         console.log(JSON.stringify(employmentData))
         var employmentOption = {
               title : {
                   text: '人群身份分布',
                   subtext: '显示前10'
               },
               tooltip : {
                   trigger: 'item',
                   formatter: "{b}: {c}"
               },
               toolbox: {
                   show : true,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable : false,
               series : [
                   {
                       name:'',
                       type:'treemap',
                       itemStyle: {
                           normal: {
                               label: {
                                   show: true,
                                   formatter: "{b}"
                               },
                               borderWidth: 1
                           },
                           emphasis: {
                               label: {
                                   show: true
                               }
                           }
                       },
                       data:employmentData
                   }
               ]
           };
             employmentChart.hideLoading();
             employmentChart.setOption(employmentOption);
             window.onresize = employmentChart.resize;
       });
      }
   </script>
</html>
